<template>
  <div class="checkbox-show" >
    <div class="qHead">
      <span v-if="isNess" style="color:red">*</span>
      <span v-if="no!=0" class="font">{{no}}.</span>
      <span class="font">{{showtitle()}}</span>
    </div>
    <div>
<!--      <el-checkbox-group v-model="checkList">-->
        <div v-for="(item, index) in options" class="option">
          <el-checkbox  class="checkbox" :label="item.id" :model-value="item.isDefault">
            <span style="font-size: 16px; font-weight:bold; margin-left:10px">{{item.text}}</span>
            <!-- {{item.text}}{{showDescription(item.description)}} -->
          </el-checkbox>
          <div>
            <div class="description">{{showDescription(item.description)}}</div>
            <span v-if="isShowCount" style="color: #ff8198;">0票</span>
            <span v-if="isShowPercent  && isShowCount">(0%)</span>
            <span v-else-if="isShowPercent && !isShowCount">0%</span>
          </div>
        </div>


<!--      </el-checkbox-group>-->
    </div>
    <relationString :string="question.relationString"></relationString>
    <el-row >
      <question-pos-edit
          :questionnaire-id="questionnaireId"
          :questions="questions"
          :question-id="questionId"
          :question="question"
          type="checkbox"
        @edit="edit"
        @copy="copy"
        @deleteQ="deleteQ"
        @moveup="moveup"
        @movedown="movedown"
        @movetop="movetop"
        @movebottom="movebottom"
      >
      </question-pos-edit>
    </el-row>
  </div>
</template>

<script>
import QuestionPosEdit from '../QuestionPosEdit.vue'
import relationString from "../../../question/relationString";
export default {
  name:'CheckBosShow',
  components: {
    QuestionPosEdit,relationString
  },
  data(){
   return {
     ishover: true,
     checkList: [],
   }
  },
  created() {
    this.options.forEach(option => {
      if(option.isDefault){
        this.checkList.push(option.id)
      }
    });
  },
  props: {
    isNess: {
      type: Boolean,
      default: true,
    },
    isShowCount: {
      type: Boolean,
      default: true,
    },
    isShowPercent: {
      type: Boolean,
      default: true,
    },
    no: {
      type: Number,
      default: 2,
    },
    title: {
      type: String,
      default: '标题'
    },
    options: {
      type: Array,
      default: []
    },
    questionId:{
      type:Number,
      default: 0
    },
    questionnaireId: {
      type: Number,
      default: 0
    },
    questions: {
      type: Array,
      default: []
    },
    question:{
      type: Object,
      default: null
    }
    // checkList:{
    //   type: Array,
    //   default: []
    // }
  },
  methods: {
    edit() {
      this.$emit('edit')
    },
    copy() {
      this.$emit('copy')
    },
    deleteQ() {
      this.$emit('deleteQ')
    },
     moveup() {
      this.$emit('moveup')
    },
    movedown() {
      this.$emit('movedown')
    },
    movetop() {
      this.$emit('movetop')
    },
    movebottom() {
      this.$emit('movebottom')
    },
    showtitle(){
      if(this.title == null || this.title == ''){
        return '题目'
      }else {
        return this.title
      }
    },
    showDescription(description) {
      if(description == '' || description == null) {
        return ''
      }else {
        return '('+description+')'
      }
    }
  }
}
</script>

<style scoped src='assets/css/editcss/checkBoxShow.css'>
  /* @import url('../../css/checkBoxShow.css'); */
</style>
